<template>
  <div >
   <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/travel/mytravel', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">近期活动</h1>
  </header>
<div class="content">
    <div class="card">
      <div class="card-header">{{travel.title}}</div>
      <div class="card-content">
      <div class="card-content-inner">
      <div><span class="icon icon-star" style="padding:10px;"></span>活动时间: {{travel.datetime}}</div>
      <div><span class="icon icon-star" style="padding:10px;"></span>活动地点:</div>
      <div><span class="icon icon-star" style="padding:10px;"></span>报名要求: ￥{{travel.money}} </div>
      <div>
       <span class="icon icon-star" style="padding:10px;"></span>内容：
       <div>{{{travel.content}}}</div>
      </div>
      </div>
      </div>
   </div>
</div>
</template>
<script>
import $ from 'zepto'
export default {
  route: {
    data () {
      this.$http.get(this.apiUrl + this.$route.query.id).
      then(function(response) {
        this.$set('travel', response.json().travel)
        $.hidePreloader()
      })
      $.showPreloader()
    }
  },
  ready () {
    $.init()
    window.onload = function() {
      console.log('window...')
      $('img').each(function(index) {
        console.log(index)
      })
    }
  },
  data () {
    return {
      travels: {},
      apiUrl: 'http://creatgo.com/oec/travel?method=travelinfo&id='
    }
  },
  methods: {
    setTravel: function (name, datetime, money, id) {
      console.log('test/.....')
      console.log(name)
      console.log(datetime)
      console.log(money)
      $.travel.name = name
      $.travel.datetime = datetime
      $.travel.money = money
      $.travel.id = id
      console.log($.travel.name)
      console.log($.travel.datetime)
      console.log($.travel.money)
      console.log($.travel.id)
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  },
  components: {
  }
}
</script>

<style>
.card-header{
 text-align:center;
 color:black;
}

ul{
 padding:0px;
}
li{
 list-style:none;
}
img{
 width:100%;
}
</style>
